<link href="jquery-bubble-popup/jquery.bubblepopup.v2.3.1.css" rel="stylesheet" type="text/css" />
<link href="jquery-ui/css/ui-lightness/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.4.4.js"> </script>
<script src="jquery-bubble-popup/jquery.bubblepopup.v2.3.1.min.js" type="text/javascript"></script>
<script src="jquery-ui/js/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script>

<br>
<br>
<br>
<br>
<br>

<div id="container" class="grd">
  <img id="img" src="image.jpg" border="0" class="mainimg"/>
  <!--<span id="marker" class="marker"></span>-->
</div>
<a id="add_marker" class="button">
    add a marker    
</a>


<div id="dialog-form" title="Create new user">
    <p class="validateTips">All form fields are required.</p>

    <form>
    <fieldset>
        <label for="name">Name</label>
        <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
        <label for="email">Email</label>
        <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
        <label for="password">Password</label>
        <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
    </fieldset>
    </form>
</div>

<style type="text/css">
    /*#img{
        cursor:url(./image.jpg),auto;
    }*/

.mainimg{
    max-width:500px;   /* FF IE7 */
    max-height:500px; /* FF IE7 */
}
.button{
    display:block;

}
.grd {
    border:1px solid #CECECE; 
    //padding:50px; 
    height:100px; 
    width:100px; 
    position:relative;
}
.grd .marker{
   background: url(markers.png) 0 -25px;
   display: block;
   position: absolute;
   /*padding: 30px;
   margin: 30px
   */
   width: 23px;
   height: 25px;
   /*top: 5px;
   left:140px;
   */
   border: 0px;
   cursor:pointer;
}
</style>

<style>
    body { font-size: 62.5%; }
    label, input { display:block; }
    input.text { margin-bottom:12px; width:95%; padding: .4em; }
    fieldset { padding:0; border:0; margin-top:25px; }
    h1 { font-size: 1.2em; margin: .6em 0; }
    div#users-contain { width: 350px; margin: 20px 0; }
    div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
    div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
    .ui-dialog .ui-state-error { padding: .3em; }
    .validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>

<script>
function log(msg){
    console.log(msg);
}
log("bb");
$(function(){
    $("#marker").mouseover(function(){
        log('aaaaaaaaaaaaaaaaaa');
        log($("#marker").css('background-position'));
        $("#marker").css({'background-position': '0px -420px' });
    });
    $("#marker").mouseout(function(){
        $("#marker").css({'background-position': '0px -25px' });
    });
    $("#add_marker").click(function(){
        create_marker();
    });
});

function marker_click_handler(event, ui){
    log ("ui2" + ui);
    $( "#dialog-form" ).dialog( "option", 'buttons', {
        "OK" : function (){
            $( this ).dialog( "close" );
            log('ui1:' + ui);
            //create_popup(ui.helper, $('#name').val(), $("#email").val());
            create_popup($(event.target), $('#name').val(), $("#email").val());
        },
        "Close" : function(){
            $( this ).dialog( "close" );
        },

    });
    $( "#dialog-form" ).dialog( "open" );
}

$(function(){
    $('#container')[0].width = $('#img')[0].clientWidth;
    $('#container').css({ 
        'height' : $('#img')[0].clientHeight ,
        'width' : $('#img')[0].clientWidth ,
    });
    $("#marker").mouseout(function(){
        $("#marker").css({'background-position': '0px -25px' });
    });
});

</script>

<script type="text/javascript">
    $(function() {
        $( "#dialog-form" ).dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
            close: function() {
                //allFields.val( "" ).removeClass( "ui-state-error" );
            }
        });
    });


    function create_popup(element, name, email){
        element.CreateBubblePopup({
                //width : '100px',
                //position: 'right',
                //align: 'top',
                innerHtml: '<br/>xxxxxxx <br/>loading <a href="/abc"> lalalalalalalalalallalla</a>!<br/>' + name + '<br/>'+ email,
                innerHtmlStyle: { color:'#000000', 'text-align':'center' },
                themeName: 'blue',
                themePath: 'jquery-bubble-popup/jquerybubblepopup-theme',
                selectable: true,
                distance : '30px',
                tail : {
                    align:'center',
                    hidden: false
                }
          });
    }
</script>
<script>
var g_marker_id = 0;

function create_marker(){
    var marker_id = "marker" + g_marker_id;
    var marker_y = g_marker_id * -25;
    var new_marker = $('<span></span>', {id: marker_id}
         )
        .addClass('marker')
        //.css({'background-position': '0px '+ marker_y +'px' })
        //.css({'top': '0px' })
        //.css({'left': '0px' })
        .appendTo("#container");

    $("#container").css({'cursor':'url(./us_cursor.gif)'});
    $("#container").bind('mousemove', function(e){
            if (e.target == new_marker[0])
                return;
            //log (e);
            //log (e.currentTarge + ' ' + e.target);
            
            var xx=e.originalEvent.x||e.originalEvent.layerX||0;
            var yy=e.originalEvent.y||e.originalEvent.layerY||0;
            log (xx + ": " + yy);
            if (xx < 20){
                log(new_marker[0]);
                log(e.target);
                log('x<20');
                log (e.currentTarge + ' ' + e.target);
            }

            $("#"+marker_id).css({'top': yy-30+'px' })
                .css({'left': xx-12+'px' })
        })

    $("#container").click(function(e){
            log (e.currentTarge + ' ' + e.target);
            $("#container").unbind("mousemove");
            $("#container").unbind("click");
            new_marker.bind("click", marker_click_handler);
            new_marker.click(); //trigger event

            //log (event.layerX);
            //log (event.offsetX);
            //log (event.pageX);
            //log (event.screenX);
            var xx=e.originalEvent.x||e.originalEvent.layerX||0;
            var yy=e.originalEvent.y||e.originalEvent.layerY||0;
            //log(xx+":" + yy);
            $("#"+marker_id).css({'top': yy-30+'px' })
                .css({'left': xx-12+'px' })

        })

    g_marker_id ++;

    $( ".marker" ).draggable({
        opacity: 0.35 ,
        containment: 'parent',

        start: function(event, ui) {
            ui.helper.unbind("click", marker_click_handler);
        },
        stop: function(event, ui) {
            setTimeout(function(){
                ui.helper.bind("click", marker_click_handler);
            }, 300);
        }
    });

}

</script>
